<div class="modal fade" id="login_modal" role="dialog">
    <div class="modal-dialog" style="width:300px;">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="btn btn-success pull-right" data-dismiss="modal">×</a>
                <h4>Welcome to academicstoday.ca</h4>
            </div>
            <div class="modal-body">
                <form method="post"
                      action='/login'
                        name="loginForm">
                    <p><input type="text"
                             class="span3"
                              name="login_username"
                                id="login_username"
                       placeholder="Enter Email"
                       autocorrect="off"
                    autocapitalize="none"
                        ></p>
                    <p><input type="password"
                             class="span3"
                              name="login_password"
                                id="login_password"
                       placeholder="Enter Password"></p>
                    <p><button onclick="ajax_authenticate();"
                                  type="button"
                                 class="btn btn-default btn-success">Sign in
                    </button> <a href="/forgot_password">Forgot Password</a></p>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    /**
     * When the 'Enter' key is pressed, lets try login in.
     */
    $(document).bind("keypress.13", function(event) {
        if ($('#login_modal').is(':visible')) {
            if (event.which == 13) {
                ajax_authenticate();
            }
        }
    });
    
    //
    // IMPORTANT:
    //  The following block of code will run when finished running this modal.
    //  Please put all jQuery unbinding code here.
    //
    // When this model hides, we will clear the contents of it.
    $('#login_modal').on('hidden.bs.modal', function (e) {
        $(document).unbind("keypress.key13");
        $('#login_modal').remove();
        $('#ajax_response_login').html('');
    });
    
    /**
     *  Function will call AJAX function to load the register.
     */
    function ajax_authenticate()
    {
        var url = 'login';

        $.ajax( url, {
            data: {
               'username': $("#login_username").val(),
               'password': $("#login_password").val(),
               'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            type: 'post',
            success: function(json_result) {
            // success code execution here
               if (json_result.status == "success")
               {
                    // Hide & close the current popup modal.
                    $('#login_modal').modal('hide');
           
                    // Load up the course list.
                    window.location = 'courses';
               }
               else
               {
                    alert(json_result.message);
               }
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }

    /**
     *  TODO: Implement.
     */
    function ajax_forget_password()
    {
        var url = 'forget_password';
    
        $.ajax( url, {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
            },
            type: 'post',
            success: function(result) {
               // success code execution here
               $('#ajax_response_register').html(result); // Update UI.
               $('#register_modal').modal();               // Unhide view.
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }
</script>